import React,{ Component } from 'react'
import { WebView, Dimensions } from 'react-native'
import  { Actions, ActionConst } from 'react-native-router-flux'
import { View, Button, Icon, Text } from '@shoutem/ui'

const getHTML = (uri) => {
  const { width } = Dimensions.get('window')
  return (`
      <img src='${uri}' width='${width-15}'/>
    `)
}

const ImageDetail = ({data}) => {
  const uri = data.hasOwnProperty('img_src') ? data.img_src : data.uri
  return (<WebView style={{flex:1}} source={{html:getHTML(uri)}}/>)
}

// const ImageDetail = (
//   {data, favorites, likes, onFavoritePress, onLikePress }
// ) => {
//   let isFavorited = favorites.has(data.id)
//   let isLiked = likes.has(data.id)
//
//   let favoriteStyleName = isFavorited ? "full-width" : "full-width muted"
//   let likeStyleName = isLiked ? "full-width" : "full-width muted"
//   return (
//     <View styleName="vertical flexible" style={{marginTop:70}}>
//       <WebView style={{flex:1}} source={{html:getHTML(data.uri)}}/>
//       <View styleName="horizontal">
//         <Button
//           styleName={favoriteStyleName}
//           onPress={() => {
//             onFavoritePress(data, isFavorited)
//           }
//         }
//         >
//           <Icon name="add-to-favorites-full" />
//           <Text>收 藏</Text>
//         </Button>
//         <Button
//           styleName={likeStyleName}
//           onPress={() => {
//             onLikePress(data, isLiked)
//           }}
//         >
//           <Icon name="like" />
//           <Text>点 赞</Text>
//         </Button>
//       </View>
//     </View>
//   )
// }

export default ImageDetail
